<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>串口通讯</title>
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<style>
    .system-setting-box > .box-title, .system-displayMessage-box > .box-title{
        padding-top: 20px;
        padding-bottom: 20px;
    }
</style>
<body>
    <div class="container-fluid" style="box-shadow: 1px 1px 3px lightgrey">
        <div class="container" style="padding-top: 10px; padding-bottom: 10px">
            <h1>串口通讯服务</h1>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <!--串口设置-->
                <div class="system-setting-box">
                    <div class="box-title">
                        <h3>串口设置</h3>
                    </div>
                    <div class="box-content">
                        <form class="inline">
                            <div class="form-group row">
                                <label for="portList" class="col-sm-4 col-form-label">串口设置</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="portList">
                                        <option th:each="portName : ${portNames}" th:text="${portName}" th:value="${portName}">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="baudRate" class="col-sm-4 col-form-label">波特率</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="baudRate">
                                        <option>9600</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="dataBit" class="col-sm-4 col-form-label">数据位</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="dataBit">
                                        <option>0</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="checkBit" class="col-sm-4 col-form-label">校验位</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="checkBit">
                                        <option>0</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="stopBit" class="col-sm-4 col-form-label">停止位</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="stopBit">
                                        <option>0</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <button class="btn btn-block btn-primary" id="openDevice">打开设备</button>
                    <button class="btn btn-block btn-success" id="closeDevice">关闭设备</button>
                </div>
                <HR>

                <!--接收设置-->
                <div class="system-receive-box">
                    <div class="box-title">
                        <h3>接收设置</h3>
                    </div>
                    <div class="box-content">
                        <form class="inline">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="receiveByASCII" value="ascii" checked>
                                <label class="form-check-label" for="receiveByASCII">ASCII</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="receiveByHEX" value="hex">
                                <label class="form-check-label" for="receiveByHEX">HEX</label>
                            </div>
                        </form>
                    </div>
                </div>
                <HR>

                <!--发送设置-->
                <div class="system-send-box" style="padding-bottom: 20px">
                    <div class="box-title">
                        <h3>发送设置</h3>
                    </div>
                    <div class="box-content">
                        <form class="inline">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="sendByASCII" value="ascii" checked>
                                <label class="form-check-label" for="receiveByASCII">ASCII</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="sendByHEX" value="hex">
                                <label class="form-check-label" for="receiveByHEX">HEX</label>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-sm-9">
                <!--消息显示-->
                <div class="system-displayMessage-box">
                    <div class="box-title">
                        <h3>消息显示</h3>
                    </div>
                    <div class="box-content">
                        <textarea class="form-control" rows="12" id="infoTextArea" style="resize: none; background-color: white" readonly="readonly">欢迎使用&#10;请先打开设备！&#10;</textarea>
                    </div>
                </div>
                <HR>
                <!--消息发送-->
                <div class="system-sendMessage-box">
                    <div class="box-title">
                        <h3>消息发送</h3>
                    </div>
                    <div class="box-content">
                        <textarea class="form-control" rows="4" id="sendTextArea" style="resize: none; background-color: white"></textarea>
                        <div class="clearfix" style="padding-top: 10px">
                            <button type="button" class="btn btn-primary float-right" id="sendText">发送</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="js/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Bootstrap Bundle -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <!-- layer.js -->
    <script src="js/layer.js"></script>
    <!-- main.js -->
    <script src="js/main.js"></script>
</body>

</html>